import React, {Component} from 'react';
import PropTypes from 'prop-types'
import './foot.scss'

//todoList尾部功能
class Foot extends Component {
    static propTypes = {
        data: PropTypes.array.isRequired, //数据列表
        editStatus: PropTypes.func.isRequired, //编辑状态
        delItem: PropTypes.func.isRequired //删除完成数据
    }

    render() {
        const {data} = this.props
        const over_num = this.getDataInfo(data)
        return (
            <div className={"foot-body"}>
                <input checked={over_num.check_all} onChange={this.checkAll} type={"checkbox"}/>
                <span className={"tong-ji"}>已完成{over_num.num}/全部{data.length}</span>
                <span>
                    {over_num.num === 0 ? null : <a className={"del-btn"} onClick={this.delItem}>删除已完成的任务</a>}
                </span>
            </div>
        );
    }

    delItem = () => {
        const {delItem, data} = this.props

        const ids = data.map(item => item.id)
        if (confirm('确定删除已完成的?')) {
            delItem(ids)
        }
    }

    /**
     * 全选/全取消
     * @param e
     */
    checkAll = (e) => {
        const {editStatus, data} = this.props

        const ids = data.map(item => item.id)
        editStatus(ids, e.target.checked)
    }

    /**
     * 获取完成数量、未完成id、已完成id
     * @param data
     * @returns {{over_id: *[], num: number, check_all: boolean}}
     */
    getDataInfo(data) {
        const info = {
            num: 0,
            check_id: [],
            no_check_id: [],
            check_all: false
        }
        data.forEach(item => {
            if (item.status) {
                info.num++
                info.check_id.push(item.id)
            } else {
                info.no_check_id.push(item.id)
            }
        })
        if (info.num > 0 && info.num === data.length) {
            info.check_all = true
        }
        return info
    }
}

export default Foot;